<template>
  <div>
    <div class="city" @click="handleCity">
      
      <div>
      {{city}}
      </div>
    </div>
    <h1>网易云</h1>
    <div class="header">
      <Search @click="handleSearch"></Search>
    </div>
    <Swiper></Swiper>
    <div class="music_column">
      <Locumn
        v-for="item of nav"
        :key="item.index"
        :data="item"
        :music="item.list"
      >
      </Locumn>
    </div>
  </div>
</template>

<script>
import Locumn from "../Music/component/locumn.vue";
import Swiper from "../Music/component/Swiper.vue";
import Search from "../Music/component/search.vue";
import axios from 'axios';
import axiosJsonp from 'axios-jsonp'
export default {
  components: {
    Swiper,
    Search,
    Locumn,
    // MusicItem
  },
  data() {
    return {
      nav: [
        { img: "hot.png", name: "热门音乐", list: "" },
        { img: "new.png", name: "最新音乐", list: "" },
        { img: "dj.png", name: "主播电台", list: "" },
      ],
      city:"localStorage.getItem('local')"
    };
  },
  methods: {
    handleCity(){
      this.$router.push('/city')
    },
    handleSearch(){
      console.log(111);
     this.$router.push('/search')
   },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    var url='https://apis.map.qq.com/ws/location/v1/ip?key=YGQBZ-POB3P-5JODH-VCNLQ-HDVNJ-FKBZF&output=jsonp'
    axios({
      url,
      adapter:axiosJsonp
    }).then(res=>{
      console.log(res.data.result.ad_info.city);
      var local =res.data.result.ad_info.city.slice(0,2);
      localStorage.setItem('local',local);
    });
    var positionCity = localStorage.getItem("city");
    if(positionCity){
      this.city=positionCity
    }

    this.$http
      .get("http://47.108.197.28:3000/top/playlist/highquality")
      .then((res) => {
        this.nav[0].list = res.data.playlists;
        // console.log(this.nav[0].list);
      });
    this.$http.get("http://47.108.197.28:3000/album/newest").then((res) => {
      res.data.albums.forEach((item) => {
        var { picUrl } = item;
        item.coverImgUrl = picUrl;
      });
      this.nav[1].list = res.data.albums;
      // console.log(this.nav[1].list);
    });
    this.$http
      .get("http://47.108.197.28:3000/personalized/djprogram")
      .then((res) => {
        res.data.result.forEach((item) => {
          var { picUrl } = item;
          item.coverImgUrl = picUrl;
        });
        this.nav[2].list = res.data.result;
        // console.log(this.nav[2].list);
      });
  },
};
</script>

<style scoped>
.header {
  padding: 10px 30px;
  background-color: aliceblue;
}
h1 {
  text-align: center;
  padding: 10px;
  font-size: 35px;
  color: #fff;
  background-color: #b3d4df;
}
.city{
  position: absolute;
  left: 20px;
  color: #fff;
}
</style>